<template>
		<div id="app">
				<h1>---------modules的内容------------start</h1>
				<p>{{ $store.state.moduleA.name }}</p>
				<button @click="moduleClick">修改modules</button>
				<p>{{ $store.getters.fullName }}</p>
				<p>{{ $store.getters.getFullName }}</p>
				<p>{{ $store.getters.rootFullName }}</p>
				<button @click="actionUpdateName">异步修改模块的值</button>
				<h1>---------modules的内容------------end</h1>
				<br>
				<br>
				<br>
				<br>
				<hr>
				<h1>----------actions，异步更新消息-------------</h1>
				<p>{{ $store.state.info }}</p>
				<button @click="actionUpdateInfo">异步更新信息</button>
				<h1>---------state，mutations------------</h1>
				<h1>{{ msg }}</h1>
				<h2>{{ count }}</h2>
				<button @click="addClick">+</button>
				<button @click="preClick">-</button>
				<h1>---------getters------------</h1>
				<p>{{ more20Stu }}</p>
				<p>{{ moreAgeStu }}</p>
				<hr>
				<h1>---------info内容是否是响应式-------</h1>
				<p>{{ $store.state.info }}</p>
				<h1>---------info内容是否是响应式-------</h1>
				<button @click="updateClick">同步更新信息</button>
				<hr>
				<Hello/>
		</div>
</template>

<script>
import Hello from "./components/Hello";

export default {
		name: 'App',
		data() {
				return {
						msg: '你好'
				}
		},
		methods: {
				addClick() {
						this.$store.commit('addCount')
				},
				preClick() {
						this.$store.commit('preCount', 5)
				},
				updateClick() {
						this.$store.commit("updateInfo")
				},
				moduleClick() {
						this.$store.commit('updateName', '修改modulesname')
				},
				actionUpdateInfo() {
						this.$store.dispatch('actionUpdateInfo', {
								msg: '修改成功',
								success: (x) => {
										console.log(x)
								}
						})
				},
				actionUpdateName() {
						this.$store.dispatch('actionUpdateName', '异步修改模块的值')
				}
		},
		components: {
				Hello
		},
		computed: {
				count() {
						return this.$store.state.count
				},
				more20Stu() {
						return this.$store.getters.more20Stu
				},
				moreAgeStu() {
						return this.$store.getters.moreAgeStu(30)
				},
		}
}
</script>

<style>
</style>
